﻿<template>
  <div class="dashboard-page">
    <div class="dashboard-container">
      <!-- 主要内容区域 -->
      <div class="main-content">
        <!-- 欢迎区域 -->
        <div class="welcome-section panel">
          <div class="welcome-content">
            <div class="welcome-avatar">
              <el-icon><User /></el-icon>
            </div>
            <div class="welcome-text">
              <h1 class="welcome-title">{{ greeting }}！</h1>
              <p class="welcome-subtitle">欢迎来到编程学习系统，开始您的学习之旅</p>
            </div>
          </div>
        </div>

        <!-- 快速操作区域 -->
        <div class="quick-actions-section">
          <h2 class="section-title">快速开始</h2>
          <div class="quick-actions-grid">
            <div class="action-card" v-for="action in quickActions" :key="action.id" @click="handleAction(action)">
              <div class="action-icon">
                <el-icon><component :is="action.icon" /></el-icon>
              </div>
              <div class="action-content">
                <h3 class="action-title">{{ action.title }}</h3>
                <p class="action-description">{{ action.description }}</p>
              </div>
              <div class="action-arrow">
                <el-icon><ArrowRight /></el-icon>
              </div>
            </div>
          </div>
        </div>

        <!-- 学习统计区域 -->
        <div class="stats-section">
          <h2 class="section-title">学习统计</h2>
          <div class="stats-grid">
            <div class="stat-card" v-for="stat in stats" :key="stat.id">
              <div class="stat-header">
                <div class="stat-icon" :class="`stat-icon--${stat.type}`">
                  <el-icon><component :is="stat.icon" /></el-icon>
                </div>
                <div class="stat-trend" :class="`trend-${stat.trend}`">
                  <el-icon><ArrowUp v-if="stat.trend === 'up'" /><ArrowDown v-else /></el-icon>
                  <span>{{ stat.change }}</span>
                </div>
              </div>
              <div class="stat-content">
                <div class="stat-value">{{ stat.value }}</div>
                <div class="stat-label">{{ stat.label }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, reactive } from "vue";
import { useRouter } from "vue-router";
import {
  ChatDotRound,
  Document,
  TrendCharts,
  User,
  ArrowUp,
  ArrowDown,
  ArrowRight,
  Clock,
  Check,
} from "@element-plus/icons-vue";

const router = useRouter();

/**
 * @computed greeting
 * @description 根据当前时间生成不同的问候语。
 */
const greeting = computed(() => {
  const hour = new Date().getHours();
  if (hour < 6) return "凌晨好";
  if (hour < 9) return "早上好";
  if (hour < 12) return "上午好";
  if (hour < 14) return "中午好";
  if (hour < 18) return "下午好";
  if (hour < 22) return "晚上好";
  return "夜深了";
});

// 快速操作
const quickActions = reactive([
  {
    id: 1,
    title: "AI 聊天助手",
    description: "与AI助手对话，获取编程帮助和学习指导",
    icon: ChatDotRound,
    route: "/chat",
  },
  {
    id: 2,
    title: "题目练习",
    description: "浏览编程题目，提升编程技能和解题能力",
    icon: Document,
    route: "/problemSet",
  },
  {
    id: 3,
    title: "学习统计",
    description: "查看您的学习进度和成就统计数据",
    icon: TrendCharts,
    route: "/statistics",
  },
  {
    id: 4,
    title: "个人中心",
    description: "管理个人信息和学习偏好设置",
    icon: User,
    route: "/profile",
  },
]);

// 统计数据
const stats = reactive([
  {
    id: 1,
    label: "今日学习时长",
    value: "2.5h",
    icon: Clock,
    type: "primary",
    trend: "up",
    change: "+15%",
  },
  {
    id: 2,
    label: "完成题目",
    value: "24",
    icon: Check,
    type: "success",
    trend: "up",
    change: "+6",
  },
  {
    id: 3,
    label: "连续学习",
    value: "12天",
    icon: TrendCharts,
    type: "info",
    trend: "up",
    change: "+1",
  },
  {
    id: 4,
    label: "编程语言",
    value: "3种",
    icon: Document,
    type: "warning",
    trend: "up",
    change: "+1",
  },
]);

// 处理快速操作点击
const handleAction = action => {
  if (action.route) {
    router.push(action.route);
  }
};
</script>

<style scoped lang="scss">
@use "@/styles/base/variables" as *;
@use "@/styles/base/mixins" as *;

.dashboard-page {
  padding: $spacing-xl;
  background: $bg-color-layout;
  min-height: 100vh;

  @media (max-width: 768px) {
    padding: $spacing-md;
  }
}

.dashboard-container {
  max-width: 1200px;
  margin: 0 auto;
}

.main-content {
  display: flex;
  flex-direction: column;
  gap: $spacing-xl;
}

.welcome-section {
  @include theme-card;
  background: linear-gradient(135deg, $color-primary-light-9, $bg-color-white);
  border-radius: $border-radius-lg;
  padding: $spacing-2xl;
  box-shadow: $box-shadow-sm;

  .welcome-content {
    display: flex;
    align-items: center;
    gap: $spacing-lg;
    max-width: 800px;
    margin: 0 auto;

    @media (max-width: 768px) {
      flex-direction: column;
      text-align: center;
      gap: $spacing-md;
    }
  }

  .welcome-avatar {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, $color-primary-light-3, $color-primary);
    border-radius: $border-radius-lg;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 36px;
    flex-shrink: 0;
    box-shadow: $box-shadow-md;
  }

  .welcome-text {
    flex: 1;

    .welcome-title {
      font-size: 2.2rem;
      font-weight: $font-weight-semibold;
      color: $color-text-primary;
      margin: 0 0 $spacing-sm 0;
      line-height: $line-height-tight;

      @media (max-width: 768px) {
        font-size: 1.8rem;
      }
    }

    .welcome-subtitle {
      font-size: $font-size-lg;
      color: $color-text-secondary;
      margin: 0;
      line-height: $line-height-normal;
    }
  }
}

.section-title {
  font-size: $font-size-xl;
  font-weight: $font-weight-semibold;
  color: $color-text-primary;
  margin: 0 0 $spacing-lg 0;
  display: flex;
  align-items: center;
  gap: $spacing-sm;

  &::before {
    content: "";
    width: 4px;
    height: 24px;
    background: linear-gradient(135deg, $color-primary, $color-primary-light-3);
    border-radius: 2px;
  }
}

.quick-actions-section {
  .quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: $spacing-lg;

    @media (max-width: 768px) {
      grid-template-columns: 1fr;
    }
  }

  .action-card {
    @include theme-card;
    border-radius: $border-radius-lg;
    padding: $spacing-xl;
    cursor: pointer;
    transition: all $transition-base;
    display: flex;
    align-items: center;
    gap: $spacing-lg;
    position: relative;
    color: $color-text-primary;
    overflow: hidden;

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, transparent, $color-primary-light-9);
      opacity: 0;
      transition: opacity $transition-base;
    }

    &:hover {
      transform: translateY(-2px);
      box-shadow: $box-shadow-base;
      border-color: $color-primary;

      &::before {
        opacity: 1;
      }

      .action-icon {
        background: $color-primary;
        color: white;
        transform: scale(1.1);
      }

      .action-arrow {
        transform: translateX(4px);
        color: $color-primary;
      }
    }

    .action-icon {
      width: 56px;
      height: 56px;
      background: $color-primary-light-9;
      border-radius: $border-radius-md;
      display: flex;
      align-items: center;
      justify-content: center;
      color: $color-primary;
      font-size: 24px;
      flex-shrink: 0;
      transition: all $transition-base;
      position: relative;
      z-index: 1;
    }

    .action-content {
      flex: 1;
      position: relative;
      z-index: 1;

      .action-title {
        font-size: $font-size-lg;
        font-weight: $font-weight-semibold;
        color: $color-text-primary;
        margin: 0 0 $spacing-xs 0;
        line-height: $line-height-tight;
      }

      .action-description {
        font-size: $font-size-sm;
        color: $color-text-secondary;
        margin: 0;
        line-height: $line-height-normal;
      }
    }

    .action-arrow {
      color: $color-text-quaternary;
      font-size: 18px;
      transition: all $transition-base;
      position: relative;
      z-index: 1;
    }
  }
}

.stats-section {
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: $spacing-lg;

    @media (max-width: 768px) {
      grid-template-columns: repeat(2, 1fr);
    }

    @media (max-width: 480px) {
      grid-template-columns: 1fr;
    }
  }

  .stat-card {
    @include theme-card;
    border-radius: $border-radius-lg;
    padding: $spacing-xl;
    transition: all $transition-base;
    position: relative;
    overflow: hidden;
    color: $color-text-primary;

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: linear-gradient(90deg, $color-primary, $color-primary-light-3);
    }

    &:hover {
      transform: translateY(-2px);
      box-shadow: $box-shadow-md;
      border-color: $color-primary-light-7;
    }

    .stat-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: $spacing-lg;

      .stat-icon {
        width: 48px;
        height: 48px;
        border-radius: $border-radius-md;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        flex-shrink: 0;

        &--primary {
          background: $color-primary-light-9;
          color: $color-primary;
        }

        &--success {
          background: $color-success-extra-light;
          color: $color-success;
        }

        &--info {
          background: $color-info-extra-light;
          color: $color-info;
        }

        &--warning {
          background: $color-warning-extra-light;
          color: $color-warning;
        }
      }

      .stat-trend {
        display: flex;
        align-items: center;
        gap: $spacing-xs;
        font-size: $font-size-xs;
        font-weight: $font-weight-medium;
        padding: $spacing-xs $spacing-sm;
        border-radius: $border-radius-sm;

        &.trend-up {
          color: $color-success;
          background: $color-success-extra-light;
        }

        &.trend-down {
          color: $color-danger;
          background: $color-danger-extra-light;
        }
      }
    }

    .stat-content {
      .stat-value {
        font-size: 2rem;
        font-weight: $font-weight-bold;
        color: $color-text-primary;
        line-height: $line-height-tight;
        margin-bottom: $spacing-xs;
      }

      .stat-label {
        font-size: $font-size-sm;
        color: $color-text-secondary;
        font-weight: $font-weight-medium;
      }
    }
  }
}

// 响应式设计优化
@media (max-width: 1024px) {
  .dashboard-container {
    padding: 0 $spacing-md;
  }

  .welcome-section {
    padding: $spacing-xl;
  }

  .quick-actions-section .quick-actions-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

@media (max-width: 768px) {
  .dashboard-page {
    padding: $spacing-md;
  }

  .main-content {
    gap: $spacing-lg;
  }

  .welcome-section {
    padding: $spacing-lg;

    .welcome-content {
      flex-direction: column;
      text-align: center;
    }

    .welcome-text .welcome-title {
      font-size: 1.8rem;
    }
  }

  .section-title {
    font-size: $font-size-lg;
  }

  .quick-actions-section .action-card {
    padding: $spacing-lg;

    .action-icon {
      width: 48px;
      height: 48px;
      font-size: 20px;
    }
  }
}

@media (max-width: 480px) {
  .dashboard-page {
    padding: $spacing-sm;
  }

  .welcome-section {
    padding: $spacing-md;

    .welcome-avatar {
      width: 64px;
      height: 64px;
      font-size: 28px;
    }

    .welcome-text .welcome-title {
      font-size: 1.5rem;
    }
  }

  .quick-actions-section .action-card {
    flex-direction: column;
    text-align: center;
    gap: $spacing-md;

    .action-arrow {
      display: none;
    }
  }

  .stats-section .stat-card {
    padding: $spacing-lg;

    .stat-content .stat-value {
      font-size: 1.5rem;
    }
  }
}
</style>
